% V20210224 - 18.4.2 jQuery Treeview Demo

INCLUDE "GW.bas"

% Create a page.
p = GW_NEW_PAGE()

% Prepare title bar string.
GW_USE_THEME_CUSTO_ONCE("notext icon=back")
lbtn$  = GW_ADD_BAR_LBUTTON$(">BACK")
title$ = GW_ADD_BAR_TITLE$("jQuery Treeview Demo")

% Add title to page.
GW_ADD_TITLEBAR(p, lbtn$ + title$)

% Reference the FancyTree online script.
base_url$ = "https://www.jqueryscript.net/demo/jQuery-jQuery-UI-Dynamic-Tree-View-Plugin-Fancytree/"
GW_INJECT_JS(p, base_url$ + "src/jquery.fancytree.js")

% Also reference the FancyTree CSS file.
GW_INJECT_CSS(p, base_url$ + "src/skin-win8/ui.fancytree.css")

% Inject an HTML list of data.
GW_INJECT_HTML(p, "<div id='tree'>")
GW_INJECT_HTML(p, "  <ul id='treeData' style='display: none;'>")
GW_INJECT_HTML(p, "    <li id='id1' title='Look, a tool tip!'>item1 with key and tooltip")
GW_INJECT_HTML(p, "    <li id='id2'>item2")
GW_INJECT_HTML(p, "    <li id='id3' class='folder'>Folder <em>with some</em> children")
GW_INJECT_HTML(p, "      <ul>")
GW_INJECT_HTML(p, "        <li id='id3.1'>Sub-item 3.1")
GW_INJECT_HTML(p, "          <ul>")
GW_INJECT_HTML(p, "            <li id='id3.1.1'>Sub-item 3.1.1")
GW_INJECT_HTML(p, "            <li id='id3.1.2'>Sub-item 3.1.2")
GW_INJECT_HTML(p, "            <li id='id3.1.3'>Sub-item 3.1.3")
GW_INJECT_HTML(p, "          </ul>")
GW_INJECT_HTML(p, "        <li id='id3.2'>Sub-item 3.2")
GW_INJECT_HTML(p, "          <ul>")
GW_INJECT_HTML(p, "            <li id='id3.2.1'>Sub-item 3.2.1")
GW_INJECT_HTML(p, "            <li id='id3.2.2'>Sub-item 3.2.2")
GW_INJECT_HTML(p, "          </ul>")
GW_INJECT_HTML(p, "      </ul>")
GW_INJECT_HTML(p, "    <li id='id4' class='expanded'>Document with some children (expanded on init)")
GW_INJECT_HTML(p, "      <ul>")
GW_INJECT_HTML(p, "        <li id='id4.1'  class='active focused'>Sub-item 4.1 (active and focus on init)")
GW_INJECT_HTML(p, "          <ul>")
GW_INJECT_HTML(p, "            <li id='id4.1.1'>Sub-item 4.1.1")
GW_INJECT_HTML(p, "            <li id='id4.1.2'>Sub-item 4.1.2")
GW_INJECT_HTML(p, "          </ul>")
GW_INJECT_HTML(p, "        <li id='id4.2'>Sub-item 4.2")
GW_INJECT_HTML(p, "          <ul>")
GW_INJECT_HTML(p, "            <li id='id4.2.1'>Sub-item 4.2.1")
GW_INJECT_HTML(p, "            <li id='id4.2.2'>Sub-item 4.2.2")
GW_INJECT_HTML(p, "          </ul>")
GW_INJECT_HTML(p, "      </ul>")
GW_INJECT_HTML(p, "  </ul>")
GW_INJECT_HTML(p, "</div>")

% Render the page
GW_RENDER(p)

% Call the script to render the treeview.
JS("$('#tree').fancytree()")

DO
 % Wait for user action.
 r$ = GW_WAIT_ACTION$()

 % Place here any necessary code to process user actions.

 % Example feedback.
 POPUP r$

% End when BACK key is pressed.
UNTIL r$ = "BACK"

END "End of jQuery Treeview Demo"